<template>
  <!-- 一个模板外部只能有1个div -->
  <div class="mui-scroll-wrapper">
  	<div class="mui-scroll">
		  <!--这里放置真实显示的DOM内容-->
      <!-- 品牌列表 -->
      <div class="brand-list">
        <div>
          <dl v-for="(brand,index) in  $store.state.appCarlist.brandList">
            <dt :ref="brand.firstWord">{{brand.firstWord}}</dt>
            <dd v-for="(car,index) in brand.carBrands" @tap="sendBrand(car)">
              <a>
                <img v-lazy="$store.state.appData.imgUrl+car.pic" :alt="car.cName">{{car.cName}}
              </a>
            </dd>
          </dl>
        </div>
      </div>
    </div>
    <!-- 导航 -->
      <div class="pop-brand-letter clearfix">
        <ul>
          <li v-for="(brand,index) in $store.state.appCarlist.brandList">
            <a  @tap="handleScroll(brand)" :class="{activeBrand: activeName == brand.firstWord}">{{brand.firstWord}}</a>
          </li>
        </ul>
      </div>
  </div>
</template>
<script>
  import mui from 'static/js/mui'
  import { Toast } from 'mint-ui'
  
 
  export default {
    data() {
      return {
        activeName: '',
      };
    },
    props: {},
    watch: {},
    methods: {
      back() {
        this.$router.push({
          path: "/index"
        });
      },
      sendBrand(brand) {
        //console.log(brand)
        this.$router.push({
          name: "filter",
          params:{ 
              brand: brand, 
          }
        })
      },
     
      handleScroll(data) {
        //弹消息框
        Toast(data.firstWord)
        //选中方法
        this.activeName = data.firstWord
        //滚动到底部后回弹
        mui('.mui-scroll-wrapper').scroll().scrollTo(0,-(this.$refs[data.firstWord][0].offsetTop),1000);//100毫秒滚动到顶
      }
    },
    filters: {},
    computed: {},
    created() {
      
      //向store提交方法 拿到品牌数据
      this.$store.dispatch('handlerGetListBrand');
    },
    mounted() {
      mui.init({
          keyEventBind: {
          backbutton: true  //关闭back按键监听
          }
      })
      mui.back = function () {
          history.go(-1)
      }
      //竖向滚动
      mui('.mui-scroll-wrapper').scroll({
        scrollY: true, //是否竖向滚动
        scrollX: false, //是否横向滚动
        startX: 0, //初始化时滚动至x
        startY: 0, //初始化时滚动至y
        indicators: true, //是否显示滚动条
        deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏
        bounce: false //是否启用回弹
      });
    }
  };

</script>

<style>
  .activeBrand {
    color:red!important;
  }
  dl {
    background-color: #fff;
  }

  .brand-list {
    margin-bottom:0px;
  }

  .brand-list dt {
    color: #666;
    height: 1.1rem;
    line-height: 1.1rem;
    text-indent: .4rem;
    background-color: #f7f7f7;
    position: relative;
    padding-left:10px;
  }

  .brand-list dd{
    margin-top:10px;
    padding-bottom:10px;
    margin-left:10px;
  }

  .brand-list dd.hot {
    padding-bottom: .25rem;
  }

  .brand-list dd.hot a {
    height:27.5px;
  
    width: 33.3%;
    float: left;
    border-bottom: none;
    text-align: center;
    height: inherit;
    line-height: inherit;
  }

  .brand-list dd a {
    display: block;
    height: 27.5px;
    line-height: 2.75rem;
    position: relative;
    line-height:  27.5px;
  }

  .brand-list dd a img {
    float: left;
    /* margin: .25rem .5rem 0 0.25rem; */
    height: 27.5px;
    width:  27.5px;
    margin-right:5%;
  }

  .brand-list dd.hot a span {
    display: block;
    padding-bottom: .25rem;
  }

  .brand-list dd.hot a img {
    float: none;
    margin: .25rem auto 0;
  }

  .brand-list dd.hot a {
    width: 33.3%;
    float: left;
    border-bottom: none;
    text-align: center;
    height: inherit;
    line-height: inherit;
  }

  /* 导航 */
  .pop-brand-letter {
    font-size: .6rem;
    position: fixed;
    right: 0;
    top:43%;
    width: 1.5rem;
    padding-top: 2.2rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
  }

  .pop-brand-letter li a {
    display: block;
    height:0.9rem;
    line-height: 1.1rem;
    text-align: center;
    color: #576b95;
  }

</style>
